<!DOCTYPE html>
<html>
<head>
    <title>F-t Graph</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Coordinate System Mapping ---
    // Define padding around the graph area
    const padding = { top: 40, right: 50, bottom: 80, left: 60 };
    // Calculate the dimensions of the graph area
    const graphWidth = canvas.width - padding.left - padding.right;
    const graphHeight = canvas.height - padding.top - padding.bottom;

    // Define the origin of the graph in canvas coordinates
    const origin = {
        x: padding.left,
        y: canvas.height - padding.bottom
    };

    // Define the maximum values for the axes for scaling purposes
    const xMax = 8; // Max t value (graph goes to 7, use 8 for spacing)
    const yMax = 12; // Max F value (graph goes to 10, use 12 for spacing)

    // Calculate scale factors
    const xScale = graphWidth / xMax;
    const yScale = graphHeight / yMax;

    // Helper function to convert graph coordinates (t, F) to canvas pixel coordinates
    function toCanvasCoords(t, F) {
        return {
            x: origin.x + t * xScale,
            y: origin.y - F * yScale
        };
    }

    // --- Drawing Functions ---

    // 1. Draw Axes
    function drawAxes() {
        ctx.beginPath();
        // Y-axis line
        ctx.moveTo(origin.x, padding.top);
        ctx.lineTo(origin.x, origin.y);
        // X-axis line
        ctx.lineTo(origin.x + graphWidth, origin.y);
        ctx.stroke();

        // Arrowheads
        const arrowSize = 10;
        // Y-axis arrow
        ctx.beginPath();
        ctx.moveTo(origin.x, padding.top);
        ctx.lineTo(origin.x - arrowSize / 2, padding.top + arrowSize);
        ctx.lineTo(origin.x + arrowSize / 2, padding.top + arrowSize);
        ctx.closePath();
        ctx.fill();

        // X-axis arrow
        ctx.beginPath();
        ctx.moveTo(origin.x + graphWidth, origin.y);
        ctx.lineTo(origin.x + graphWidth - arrowSize, origin.y - arrowSize / 2);
        ctx.lineTo(origin.x + graphWidth - arrowSize, origin.y + arrowSize / 2);
        ctx.closePath();
        ctx.fill();

        // Axis Labels
        ctx.textAlign = 'center';
        ctx.fillText('F/N', origin.x + 10, padding.top - 15);
        ctx.fillText('t/s', origin.x + graphWidth + 20, origin.y);
        ctx.fillText('O', origin.x - 15, origin.y + 15);
    }

    // 2. Draw Ticks, Labels, and Dashed Guide Lines
    function drawLabelsAndGuides() {
        // Define key points in graph coordinates
        const p5_0 = toCanvasCoords(5, 0);
        const p7_0 = toCanvasCoords(7, 0);
        const p0_10 = toCanvasCoords(0, 10);
        const p5_10 = toCanvasCoords(5, 10);

        // X-axis labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('5', p5_0.x, p5_0.y + 8);
        ctx.fillText('7', p7_0.x, p7_0.y + 8);

        // Y-axis label
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('10', p0_10.x - 10, p0_10.y);
        
        // Dashed lines
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 1;
        
        // Horizontal dashed line
        ctx.beginPath();
        ctx.moveTo(p0_10.x, p0_10.y);
        ctx.lineTo(p5_10.x, p5_10.y);
        ctx.stroke();
        
        // Vertical dashed line
        ctx.beginPath();
        ctx.moveTo(p5_0.x, p5_0.y);
        ctx.lineTo(p5_10.x, p5_10.y);
        ctx.stroke();
        
        ctx.restore(); // Restore line style to solid
    }

    // 3. Draw the main graph (the triangle)
    function drawGraph() {
        const p0_0 = toCanvasCoords(0, 0);
        const p5_10 = toCanvasCoords(5, 10);
        const p7_0 = toCanvasCoords(7, 0);
        
        ctx.beginPath();
        ctx.moveTo(p0_0.x, p0_0.y);
        ctx.lineTo(p5_10.x, p5_10.y);
        ctx.lineTo(p7_0.x, p7_0.y);
        ctx.stroke();
    }

    // 4. Draw the caption below the graph
    function drawCaption() {
        ctx.font = '20px "SimSun", "Songti SC", sans-serif'; // Use fonts that support Chinese characters
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('习题 1-39 图', canvas.width / 2, canvas.height - 15);
    }

    // --- Execute all drawing functions ---
    drawAxes();
    drawLabelsAndGuides();
    drawGraph();
    drawCaption();

</script>
</body>
</html>